<template>
  <div class="user-center-container">
    <!-- 左侧菜单 -->
    <div class="left-menu">
      <!-- <div class="menu-header">
        <h3>用户中心</h3>
      </div> -->
      <ul class="menu-list">
        <li
          v-for="item in menuItems"
          :key="item.key"
          :class="['menu-item', { active: activeMenu === item.key }]"
          @click="switchMenu(item.key)"
        >
          <span class="menu-icon">
            <img :src="item.icon" class="menu-icon-img" />
          </span>
          <span class="menu-text">{{ item.label }}</span>
        </li>
      </ul>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <transition name="fade" mode="out-in">
        <component :is="currentComponent" />
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import BasicInfo from './components/BasicInfo.vue'
import MyDemands from './components/MyDemands.vue'
import MyCollections from './components/MyCollections.vue'
import AppliedResources from './components/AppliedResources.vue'
import Apply from './components/Apply.vue'

// 导入图片
import basicIcon from '@/assets/imgs/center/message.svg'
import demandsIcon from '@/assets/imgs/center/demands.svg'
import collectionsIcon from '@/assets/imgs/center/collections.svg'
import appliedIcon from '@/assets/imgs/center/resources.svg'
import applyIcon from '@/assets/imgs/center/apply.svg'

// 菜单项配置
const menuItems = [
  { key: 'basic', label: '基本信息', icon: basicIcon },
  { key: 'apply', label: '申请审批', icon: applyIcon },
  { key: 'demands', label: '我的需求', icon: demandsIcon },
  { key: 'collections', label: '我的收藏', icon: collectionsIcon },
  { key: 'applied', label: '已申请资源', icon: appliedIcon }
]

const activeMenu = ref('basic')
const currentComponent = shallowRef(BasicInfo)

// 切换菜单
const switchMenu = (menuKey: string) => {
  activeMenu.value = menuKey

  // 根据菜单键值切换组件
  switch (menuKey) {
    case 'basic':
      currentComponent.value = BasicInfo
      break
    case 'demands':
      currentComponent.value = MyDemands
      break
    case 'collections':
      currentComponent.value = MyCollections
      break
    case 'applied':
      currentComponent.value = AppliedResources
      break
    case 'apply':
      currentComponent.value = Apply
      break
  }
}
</script>

<style scoped lang="scss">
.user-center-container {
  display: flex;
  min-height: 600px;
  background: #fff;
  // border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  gap: 20px; // 添加间距
  overflow: hidden;
  padding: 20px;
}

.left-menu {
  width: 260px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 20px 0;

  .menu-header {
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }

  .menu-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
  }

  .menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 10px;
    border-radius: 8px;

    &:hover {
      background: #e6f7ff; // 悬停时的浅蓝色背景
      // border-left-color: #009eff;
    }

    &.active {
      background: #009eff; // 选中时的蓝色背景
      border-radius: 8px;
      // border-left-color: #1890ff;

      .menu-icon {
        .menu-icon-img {
          filter: brightness(0) invert(1); // SVG变白色
        }
      }

      .menu-text {
        color: #fff; // 文字变白色
        font-weight: 600;
      }
    }

    .menu-icon {
      margin-right: 12px;
      font-size: 18px;

      .menu-icon-img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        filter: brightness(0); // 默认黑色
        transition: filter 0.3s ease;
      }
    }

    .menu-text {
      font-size: 14px;
      color: #333; // 默认文字颜色
      transition: all 0.3s ease;
    }
  }
}

.right-content {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  min-height: 500px;
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>
